<template>
  <div class="chat-container">
    <h2>Chat Interface</h2>
    <el-input
        v-model="userMessage"
        placeholder="Type your message here..."
        clearable
        style="margin-bottom: 10px;"
    />
    <div>
      <el-button type="primary" @click="sendMessage">Send</el-button>
      <el-button type="success" @click="sendMessage1">Send Stream</el-button>
    </div>

    <el-loading :loading="loading" text="Loading response..." :fullscreen="false">
      <div v-if="!loading && response" class="output-box">
        <h3>Response:</h3>
        <p v-html="formattedResponse"></p>
      </div>
      <div v-else-if="loading" class="loading-overlay">
        <!-- 旋转的 loading 效果 -->
        <el-spinner></el-spinner>
      </div>
    </el-loading>

    <el-alert v-if="errorMessage" title="Error" type="error" :closable="false">
      {{ errorMessage }}
    </el-alert>
  </div>
</template>

<script>
import axios from "axios";
import Qs from 'qs';

export default {
  data() {
    return {
      userMessage: '',
      response: '',
      loading: false,
      errorMessage: '',
    };
  },
  computed: {
    formattedResponse() {
      return this.response.replace(/\n/g, '<br/>'); // 替换换行符为 <br>
    },
  },
  methods: {
    sendMessage() {
      this.loading = true;
      this.errorMessage = '';
      axios({
        method: 'post',
        url: 'http://localhost:8080/ai/chat',
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        data: Qs.stringify({message: this.userMessage}),
      })
          .then((response) => {
            this.response = response.data;
            this.userMessage = ''; // 清空输入框
          })
          .catch((error) => {
            console.error(error);
            this.errorMessage = 'Failed to get response. Please try again.';
          })
          .finally(() => {
            this.loading = false;
          });
    },
    sendMessage1() {
      this.loading = true;
      this.errorMessage = '';
      axios({
        method: 'post',
        url: 'http://localhost:8080/ai/chat/stream',
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        data: Qs.stringify({msg: this.userMessage}),
      })
          .then((response) => {
            this.response = response.data;
            this.userMessage = ''; // 清空输入框
          })
          .catch((error) => {
            console.error(error);
            this.errorMessage = 'Failed to get response. Please try again.';
          })
          .finally(() => {
            this.loading = false;
          });
    },
  },
};
</script>

<style scoped>
.chat-container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.output-box {
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f9f9f9; /* 背景颜色 */
}

.loading-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 根据需要调整高度 */
}
</style>
